<template>
  <u-popup
    mode="bottom"
    v-model="showPopup"
    :z-index="999"
    border-radius="24"
    safe-area-inset-bottom
    :maskCloseAble="false"
  >
    <view class="popBox">
      <view class="popup-title">
        <view class="let">修改{{ getTitle }}</view>

        <i class="iconfont icon-close" @click="showPopup = false"></i>
      </view>

      <view class="filterRig" @click="BatchProcessing = !BatchProcessing">
        <i class="iconfont icon-nav-list"></i>
        <view class="text">{{ getStatus }}</view>
      </view>

      <view class="tabBox" v-if="data">
        <scroll-view class="tabHeader" scroll-x="true">
          <view
            class="item"
            v-for="(item, index) of data.title"
            :key="index"
            :class="[getClass(index)]"
            @click="changeIndex(index)"
            >{{ item.attr_name }}<view class="icon"></view
          ></view>
        </scroll-view>

        <scroll-view scroll-y="true" class="tabCon">
          <view class="item" v-for="(item, i) of data.attr_group" :key="i">
            <view class="goods" v-if="i === index">
              <view class="goodsItem" v-for="(cItem, o) of item.list" :key="o">
                <view class="checkBox" v-if="BatchProcessing">
                  <checkbox-group>
                    <checkbox
                      color="#fff"
                      class="checkbox"
                      :checked="cItem.checked"
                      @click="setChecked(cItem)"
                    />
                  </checkbox-group>
                </view>

                <view class="img">
                  <image :src="cItem.pic" mode="aspectFill"></image>
                </view>

                <view class="con">
                  <view class="attr">{{ getAttr(cItem) }}</view>
                  <view class="price">售价 ¥{{ cItem.price }}</view>
                  <view class="price c-red"
                    >成本价 ¥{{ cItem.cost_price }}</view
                  >
                  <view class="des">货号 {{ cItem.no }}</view>
                </view>

                <view class="inp">
                  <!-- <view v-if="status === 1">¥</view> -->
                  <u-input
                    v-if="status === 1"
                    v-model="cItem.price"
                    type="digit"
                    clearable
                    placeholder="请输入价格"
                  ></u-input>
                  <u-input
                    v-model="cItem.num"
                    v-else-if="status === 2"
                    type="number"
                    clearable
                    placeholder="请输入库存"
                  ></u-input>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="tools-pof">
        <view class="btn">
          <u-button
            v-if="!BatchProcessing"
            :customStyle="{
              background: '#F0250E',
              color: '#fff',
              borderRadius: '32px'
            }"
            :hoverStartTime="hoverStartTime"
            @click="changeValue"
            >{{ $t("newAdmin.filter.submit") }}</u-button
          >
          <u-button
            v-else
            :customStyle="{
              background: '#F0250E',
              color: '#fff',
              borderRadius: '32px'
            }"
            :hoverStartTime="hoverStartTime"
            @click="openPop"
            >批量修改</u-button
          >
        </view>
      </view>
    </view>

    <pagePopInp
      ref="pagePopInp"
      @changeValue="setValue"
      :title="getTitle"
      :status="status"
    ></pagePopInp>
  </u-popup>
</template>

<script>
import { storeAdminGetGoodsAttr, storeAdminSetGoodsPrice } from "@/api/admin";
import pagePopInp from "./page-pop-inp";

export default {
  components: {
    pagePopInp
  },

  data() {
    return {
      showPopup: false,
      disabled: false,
      isAll: false,
      data: null,
      index: 0,

      BatchProcessing: false
    };
  },

  props: {
    hoverStartTime: {
      type: Number
    },

    customStyle: {
      type: Object,
      default() {
        return {};
      }
    },

    goodsId: {
      type: [Number, String],
      default: undefined
    },

    status: {
      type: Number,
      default: 1
    }
  },

  watch: {
    goodsId() {
      this.getAttrData();
    },

    data: {
      handler(val) {
        if (!val) {
          return;
        }

        let list = val.attr_group;
        if (list) {
          let { index } = this;
          if (list[index].list.every((el) => el.checked)) {
            this.isAll = true;
          } else {
            this.isAll = false;
          }
        }
      },
      deep: true
    }
  },

  computed: {
    getAttr() {
      return (item) => {
        return item.attr_list.map((el) => el.attr_name).join("/");
      };
    },

    getClass() {
      return (index) => {
        return this.index === index ? "on" : "";
      };
    },

    getTitle() {
      return this.status === 1 ? "价格" : "库存";
    },

    getStatus() {
      return this.BatchProcessing ? "取消批量" : "批量";
    }
  },

  methods: {
    changeValue() {
      let { data, goodsId: id } = this,
        attr_group = JSON.parse(JSON.stringify(data.attr_group)),
        params = {
          id
        };

      attr_group.forEach((el) => {
        el.list.forEach((cEl) => {
          delete cEl.checked;
        });
      });

      params.attr = [];
      attr_group.forEach((el) => {
        params.attr.push(...el.list);
      });

      storeAdminSetGoodsPrice(params).then((res) => {
        this.$utils.toast(res.msg);

        if (res.code === 0) {
          this.showPopup = false;
          this.getAttrData();
        }
      });
    },

    getAttrData() {
      storeAdminGetGoodsAttr({
        id: this.goodsId
      }).then((res) => {
        if (res.code === 0) {
          let { attr_group, title } = res.data;

          this.clearData(attr_group);

          this.data = {
            attr_group,
            title
          };
        }
      });
    },

    setData() {
      let { index, data } = this,
        { attr_group } = data;

      if (!attr_group[index].list.some((el) => el.checked)) {
        this.$utils.toast("请至少选择一条数据");
        return;
      }

      this.$refs.pagePopInp.showPopup = true;
    },

    handle(item) {
      if (!this.BatchProcessing) return;
      this.$set(item, "checked", !item.checked);
    },

    clearData(list) {
      list.forEach((el) => {
        el.list.forEach((cEl) => {
          cEl.checked = false;
        });
      });
    },

    changeIndex(index) {
      if (this.index === index) {
        return;
      }

      this.index = index;
      this.isAll = false;
      this.clearData(this.data.attr_group);
    },

    changeAll() {
      this.isAll = !this.isAll;
      let { index, data } = this;
      if (this.isAll) {
        data.attr_group[index].list.forEach((el) => (el.checked = true));
      } else {
        data.attr_group[index].list.forEach((el) => (el.checked = false));
      }
    },

    openPop() {
      this.$refs.pagePopInp.showPopup = true;
    },

    setValue(num) {
      let key = this.status === 1 ? "price" : "num",
        list = this.data.attr_group[this.index].list,
        pagePopInp = this.$refs.pagePopInp;
      list.forEach((e) => {
        if (e.checked) {
          e[key] = num;
        }
      });

      pagePopInp.showPopup = false;
      pagePopInp.disabled = false;
      this.BatchProcessing = false;
      this.clearData(this.data.attr_group);
    },

    setChecked(item) {
      let checked = item.checked;
      checked = !checked;
      this.$set(item, "checked", checked);
    }
  }
};
</script>

<style lang="less" scoped>
.popBox {
  display: flex;
  flex-direction: column;
  padding: 0 0;
}

.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 36rpx;

  .let {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }

  .iconfont {
    color: #262626;
  }
}

.tools-pof {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
}

.BatchProcessing {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .let {
    font-size: 32rpx;
    color: #262626;
  }
}

.filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 24rpx;
  /* background: #f8f8f8; */
  font-size: 24rpx;
  color: #666;
}

.filterLet {
  flex: 1;
  overflow: hidden;
  display: flex;

  .item {
    position: relative;
    padding-right: 30rpx;
    margin-right: 64rpx;
  }

  .text {
    color: #666;
  }

  .icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2rpx;
    border-width: 8rpx 8rpx 0;
    border-style: solid;
    border-color: #dbdbdb transparent transparent;
  }
}

.filterRig {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10rpx;
  overflow: hidden;

  .iconfont {
    color: #262626;
    font-size: 36rpx;
  }

  .text {
    margin-left: 5rpx;
  }
}

.tabBox {
  display: flex;
  flex-direction: column;
  padding: 0 36rpx;
  height: 760rpx;
  overflow: hidden;
}

.tabHeader {
  height: 100rpx;
  white-space: nowrap;

  .item {
    position: relative;
    display: inline-block;
    margin-right: 62rpx;
    vertical-align: middle;
    height: 100rpx;
    line-height: 100rpx;
    overflow: hidden;
    font-size: 28rpx;
    color: #262626;

    .icon {
      position: absolute;
      bottom: 19%;
      left: 0;
      right: 0;
      height: 6rpx;
      background: #f0250e;
      opacity: 0;
    }

    &.on {
      font-weight: bold;

      .icon {
        opacity: 1;
      }
    }
  }
}

.tabCon {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.goodsItem {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-top: 1px solid #f2f2f2;

  &:first-of-type {
    border-top: 0;
  }

  .img {
    width: 72rpx;
    height: 72rpx;
    border-radius: 10rpx;
    background: #f8f8f8;
    font-size: 24rpx;
    color: #262626;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .con {
    margin: 0 24rpx;
    flex: 1;
    overflow: hidden;

    view {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .price {
      margin: 4rpx 0;
    }

    .price,
    .des {
      color: #8c8c8c;
      font-size: 24rpx;
    }

    .c-red {
      color: #f0250e;
    }
  }

  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    width: 234rpx;
    height: 88rpx;
    background: #f8f8f8;

    .num {
      flex: 1;
      overflow: hidden;
      margin-left: 4rpx;
      text-align: right;
    }
  }
}
</style>
